<template>
    <view class="container">
        <!--头部导航栏-->
        <view class="search-bar">
            <view class="search-item" v-for="(item, index) in menuTop" :key="item.value" @tap="setSearchType(index)">
                <text class="search-name" :style="{color: index == searchType? '#58a9fd' : '#000000'}">{{ item.name }}</text>
                <view class="line" :class="index == searchType? 'active' : ''" ></view>
            </view>
        </view>
        <swiper class="swiper" :current="searchType" @change="setSearch">
            <swiper-item v-for="(item, index) in menuTop" :key="item.value" >
                <scroll-view class="swiper-item" scroll-y="true" :style="{height: '100%'}" v-if="index == 0">
                    <newFriensCard v-if="userResult.length > 0" :name="'用户'" :icon="'person'" :chatList="userResult" @toChat="toChat" @addOrJoin="addOrJoin"></newFriensCard>
                    <newFriensCard v-else-if="groupResult.length > 0" :name="'群聊'" :icon="'staff'" :chatList="groupResult" @toChat="toChat" @addOrJoin="addOrJoin"></newFriensCard>
                    <uni-card
                        title="全部"
                        v-else
                    >
                        <view>暂无数据~~</view>
                    </uni-card>
                </scroll-view>
                <scroll-view class="swiper-item" scroll-y="true" :style="{height: '100%'}" v-if="index == 1">
                    <uni-card
                        title="用户"
                    >
                        <listChat @addOrJoin="addOrJoin" v-if="userResult.length > 0" :list="userResult"></listChat>
                        <view v-else>暂无数据~~</view>
                    </uni-card>
                </scroll-view>
                <scroll-view class="swiper-item" scroll-y="true" :style="{height: '100%'}" v-if="index == 2">
                    <uni-card
                        title="群聊"
                    >
                        <listChat @addOrJoin="addOrJoin" v-if="groupResult.length > 0" :list="groupResult"></listChat>
                        <view v-else>暂无数据~~</view>
                    </uni-card>
                </scroll-view>
                <scroll-view class="swiper-item" scroll-y="true" :style="{height: '100%'}" v-if="index == 3">
                    <uni-card
                        title="机器人"
                    >
                        <listChat @addOrJoin="addOrJoin" v-if="otherResult.length > 0" :list="otherResult"></listChat>
                        <view v-else>暂无数据~~</view>
                    </uni-card>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
import { ref } from "vue"
import {onLoad} from '@dcloudio/uni-app';
import { searchFriends } from "../../api/user";
import newFriensCard from "./components/new_friens_card.vue";
import listChat from "../../components/list_chat.vue";


const menuTop = ref([
    {name: '全部', value: 0},
    {name: '用户', value: 1},
    {name: '群聊', value: 2},
    {name: '机器人', value: 3},
])

//搜索用户
const groupResult = ref([])
const userResult = ref([])
const otherResult = ref([])
const search = async (value) => {
    let res = await searchFriends(value)
    if(res && res.code == 0){
        console.log("搜索成功", res)
        res.result.forEach(item => {
            if(item.userId != null){
                userResult.value.push(item)
            }else if(item.groupId != null){
                groupResult.value.push(item)
            }else{
                otherResult.value.push(item)
            }
        })
    }
}
//点击头部导航菜单
const searchType = ref(0)
const setSearchType = (index) => {
    searchType.value = index
}
//滑动页面
const setSearch  =  (e) => {
    searchType.value = e.detail.current
}
//点击列表右侧图标
const toChat = (name) => {
    menuTop.value.forEach((item) => {
        if(item.name == name){
            searchType.value = item.value
        }
    })
}
//点击列表加入或进入
const addOrJoin = (item) => {
    console.log("点击列表加入或进入", item)
}
onLoad((options) => {
    //搜索
    search(options.searchText)
})
</script>

<style lang="scss" scoped>
.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #e4e4e4;
    .search-bar{
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 100rpx;
        background-color: #ffffff;
        width: 100%;
        .search-item{
            .search-name{
                font-size: 30rpx;
                transition: all 0.5s ease;
            }
            .line{
                margin-top: 5rpx;
                height: 5rpx;
                transition: background-color 0.5s ease;
            }
            .active{
                background-color: #58a9fd;
            }
        }
    }
    .swiper{
        height: 100%;
        width: 100%;
        .swiper-item{
            display: flex;
            flex-direction: column;
        }
    }
}

</style>